html
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
css
.container {
display: grid;
}
grid-template-columns. Eg grid-template-columns: 100px auto 100px == means 3 columns with the second column taking up whatever space left; first and third row having 100px width.grid-template-rows. Eg grid-template-rows: 50px 50px; == means 2 rows, each having 50px heights.grid-gap. Eg grid-gap: 3px gives gaps of 3px in between all child elements.auto also makes it responsive.grid-template-columns: 1fr 2fr 1fr = the second column will always be twice as big as the first and third columns because they take up 1fr each.grid-template-columns: 1fr 1fr 1fr is using repeat; ie grid-template-columns: repeat(3, 1fr). The first argument is the amount of rows or columns, the second value is the fraction we want to specify for each of the row or column.grid-template-columns and grid-template-rows is to combine both into grid-template: rows / columns. Eg below, both of the example below give the same result.grid-column-start to specify the start position and grid-column-end to specify the end position.We can combine both grid-column-start and grid-column-end into grid-column, using this syntax: grid-column: start position / end position.
Use span x when we don't know the exact end column number, but want the element to span across x column from start. Eg grid-column: 1 / span 3 will have the element start at column 1, and end at column 1+3=4.
Use negative index, when we don't know the exact end column number, but want to make sure that the column ends at i-th element from the last column.
Note: first column is indexed 1. Last column is indexed -1.
Example 1
Example 2
grid-column: auto / span 2Example 3
grid-row: auto / span 2Example 4